<div class="card">
  <div class="card-header">
    <button
      type="button"
      class="btn btn-primary btn-sm"
      data-toggle="modal"
      data-target="#modal-default"
      id="addBtn"
    >
      添加广告
    </button>
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th style="width: 10px">id</th>
          <th>广告标题</th>
          <th>广告图片</th>
          <th>广告类别</th>
          <th>广告链接</th>
          <th>添加时间</th>
          <th>修改时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <% for(let i = 0; i < data.length; i++){ %>
        <tr>
          <td><%= data[i]._id %></td>
          <td><%= data[i].advTitle %></td>
          <td>
            <img width="60" src="<%= data[i].advImg %>" alt="" />
          </td>
          <td><%= data[i].advCate %></td>
          <td><%= data[i].advLink %></td>
          <td>
            <%= moment(data[i].insertDate).format('YYYY/MM/DD HH:mm:ss') %>
          </td>
          <td>
            <%= moment(data[i].updateDate).format('YYYY/MM/DD HH:mm:ss') %>
          </td>
          <td>
            <!-- 为了删除时找到id,需要在渲染的时候,存储id -->
            <button
              type="button"
              class="btn btn-danger btn-xs delBtn"
              id="<%= data[i]._id%>"
            >
              删除
            </button>
            <button
              type="button"
              class="btn btn-primary btn-xs updateBtn"
              data-id="<%= data[i]._id%>"
            >
              修改
            </button>
          </td>
        </tr>
        <% } %>
      </tbody>
    </table>
  </div>
</div>

<!-- 添加或修改广告的模态框 -->
<div
  class="modal fade show"
  id="modal-default"
  style="padding-right: 17px; display: display"
  aria-modal="true"
  role="dialog"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">添加广告</h4>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true" id="cancel-x">×</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 添加广告表单 -->
        <form class="form-horizontal" id="form">
          <div class="card-body">
            <div class="form-group row">
              <label for="inputEmail3" class="col-sm-2 col-form-label"
                >标题</label
              >
              <div class="col-sm-10">
                <input
                  type="text"
                  class="form-control"
                  id="inputEmail3"
                  placeholder="请输入广告标题"
                  name="advTitle"
                />
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword3" class="col-sm-2 col-form-label"
                >类别</label
              >
              <div class="col-sm-10">
                <input
                  type="text"
                  class="form-control"
                  id="inputPassword3"
                  placeholder="请输入广告类别"
                  name="advCate"
                />
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword4" class="col-sm-2 col-form-label"
                >链接</label
              >
              <div class="col-sm-10">
                <input
                  type="text"
                  class="form-control"
                  id="inputPassword4"
                  placeholder="请输入广告链接"
                  name="advLink"
                />
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword3" class="col-sm-2 col-form-label"
                >图片</label
              >
              <div class="col-sm-10">
                <input
                  id="file"
                  type="file"
                  class="form-control upload-file"
                  id="inputPassword3"
                  name="file"
                />
              </div>
            </div>
            <div class="form-group row">
              <img
                id="preShow"
                src="/adminLTE/imgs/adv1.jpg"
                alt=""
                width="100"
              />
            </div>
          </div>
          <!-- /.card-body -->
        </form>
      </div>
      <div class="modal-footer justify-content-between">
        <button
          id="cancel"
          type="button"
          class="btn btn-default"
          data-dismiss="modal"
        >
          取消
        </button>
        <button
          id="saveAdv"
          type="button"
          class="btn btn-primary"
          data-dismiss="modal"
        >
          保存
        </button>
      </div>
    </div>
  </div>
</div>
